{% extends 'base.html' %}
{% import 'include/macros.html' as macros %}

{% block styles %}
    {{ super() }}
    <link href="{{ static('css/cart.css') }}" rel="stylesheet">
{% endblock %}

{% block page_content %}
    <div class="row">
        <div style="padding:0;" class="col-md-offset-2 col-md-8">
            <form method="post" action="">
                <table style="margin-bottom:10px;" class="card table">
                    <thead>
                    <tr>
                        <th style="width:40px;">
                            <input style="margin-left:15px;" class="check-all" type="checkbox" title="全选">
                        </th>
                        <th style="width:120px;">图片</th>
                        <th>信息</th>
                        <th>单价（元）</th>
                        <th>数量</th>
                        <th>小计（元）</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for item in cart.get_items() %}
                        {% with book=item.book %}
                            {% include 'include/cart_item.html' %}
                        {% endwith %}
                    {% endfor %}
                    </tbody>
                </table>
            </form>
            <div id="settlement" class="card">
                <div class="pull-left">
                    <input style="margin-left:12px;" type="checkbox" class="check-all" title="全选">全选
                    <a style="margin-left:20px;" href="{{ url('cart:remove-checked') }}"
                       class="btn btn-warning">删除选中</a>
                </div>
                <div class="pull-right">
                    <span style="margin-right:20px;">已选择 <span id="checked-items"
                                                               style="color:red;font-size:1.2em;">0</span> 本图书</span>
                    <span style="margin-right:20px;">总价：<span id="total_price"
                                                              style="color:red;font-size:1.2em;">￥{{ cart.get_total_price() }}</span></span>
                    <a id="settlement-btn" href="{{ url('cart:settlement') }}" class="btn btn-primary">结算</a>
                </div>
            </div>
            <div style="margin-bottom:20px;" class="card">
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active">
                        <a href="#like" data-toggle="tab">猜你喜欢</a>
                    </li>
                    <li><a href="#collection" data-toggle="tab">我的收藏</a></li>
                    <li><a href="#recently" data-toggle="tab">最近浏览</a></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="like">
                        {% if hot_books is not none %}
                            <div class="row">
                                {% for book in hot_books %}
                                    {{ macros.bookitem(book,'like'~loop.index) }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    <div class="tab-pane fade" id="collection">
                        {% if hot_books is not none %}
                            <div class="row">
                                {% for book in hot_books %}
                                    {{ macros.bookitem(book,'like'~loop.index) }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    <div class="tab-pane fade" id="recently">
                        {% if hot_books is not none %}
                            <div class="row">
                                {% for book in hot_books %}
                                    {{ macros.bookitem(book,'like'~loop.index) }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script src="{{ static('js/cart.js') }}"></script>
{% endblock %}